<template>
  <div id="lessonDetails">
    <van-nav-bar
      title="学员列表"
      left-arrow
      fixed=""
      @click-left="$router.back()"
    />
    <!-- <div class="lesson_detail">
      <p class="detail_row">
        <span>上课时间：</span>
        <span>08:00-09:00,时长01:00</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
      <p class="detail_row">
        <span>上课内容：</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
      <p class="detail_row">
        <span>上课照片：</span>
        <i class="icon iconfont icon-iconfontyoujiantou"></i>
      </p>
    </div>
    <div class="search_wrapper">
      <div class="input_wrapper">
        <input type="text" placeholder="请输入学生姓名">
        <i class="icon iconfont icon-search"></i>
        <span class="search_btn">搜索</span>
      </div>
      <div class="sort">排序</div>
      <div class="add_stus">添加学员</div>
    </div> -->
    <div class="tab_head">
      <van-row class="tab_line">
        <van-col class="tab_th" span="6">姓名</van-col>
        <van-col class="tab_th" span="6">状态</van-col>
        <van-col class="tab_th" span="6">电话</van-col>
        <van-col class="tab_th" span="6">缺勤原因</van-col>
      </van-row>
    </div>
    <div class="tab_body">
      <!-- <van-checkbox-group v-model="result">
        <van-checkbox :name="item.id" :label-disabled="true"
        :disabled="item.absence!=0"
        v-for="(item,index) in stusList"
        :key="index"> -->
          <van-row class="tab_line"
          v-for="(item,index) in stusList"
          :key="index">
            <van-col class="tab_tr" span="6">{{item.studentName}}</van-col>
            <van-col class="tab_tr" span="6">
              <van-switch
                v-model="item.arrive"
                size="20px"
                @change="switchChange(index)"
              /></van-col>
            <van-col class="tab_tr" span="6"><a :href="'tel:'+item.studentPhone"><i class="icon iconfont icon-dadianhua"></i></a></van-col>
            <van-col class="tab_tr" span="6" @click.native="absence(item)">
              <i v-if="item.absence!='1'&&item.absence!='2'&&item.absence!='3'" class="icon iconfont icon-ellipsis"></i>
              <span v-else>{{item.absence=='1'? '事假':(item.absence=='2'?'病假': '旷课')}}</span>
            </van-col>
          </van-row>
        <!-- </van-checkbox>
      </van-checkbox-group> -->
    </div>
    <div class="bottom">
      <!-- <van-checkbox v-model="allChecked">全选</van-checkbox> -->
      <span class="reAtLesson" @click="noPointName">撤销上课</span>
      <span class="atLesson" @click="pointName">点名上课</span>
    </div>
    <van-actionsheet v-model="actionSheetShow" title="缺勤原因">
      <van-radio-group v-model="radioChecked">
        <!-- <van-radio :name="0">正常上课</van-radio> -->
        <van-radio :name="1">事假</van-radio>
        <van-radio :name="2">病假</van-radio>
        <van-radio :name="3">旷课</van-radio>
      </van-radio-group>
      <van-button class="confirm_btn" type="danger" @click="confirmClick(selectedObj)">确定</van-button>
    </van-actionsheet>
    <div class="mock-loading" v-show="isLoading">
      <van-loading class="loading_item" color="#ccc"/>
    </div>
  </div>
</template>

<script>
import { NavBar, Actionsheet, Toast } from 'vant'
import { getCookieStorage } from '@/assets/js/common.js'
export default {
  data () {
    return {
      ajaxData: {
        userId: getCookieStorage('userInfo').id,
        courseLogId: ''
      },
      stusList: [],
      mdMentionStudentEntityList: [],
      radioChecked: '',
      result: [],
      actionSheetShow: false,
      // allChecked: false,
      // 选择缺勤原因中介变量
      selectedObj: {},
      // 是否点击了上课 并请求成功
      isSubmit: false,
      isLoading: false
    }
  },
  watch: {
    // allChecked (n, o) {
    //   if (n) {
    //     this.result = []
    //     for (var i = 0; i < this.stusList.length; i++) {
    //       if (this.stusList[i].absence === 0) {
    //         this.result.push(this.stusList[i].id)
    //       }
    //     }
    //   } else {
    //     this.result = []
    //   }
    // }
    // stusList: {
    //   handler (n, o) {
    //     console.log(n)
    //   },
    //   deep: true
    // }
  },
  mounted () {
    this.ajaxData.courseLogId = this.$route.query.id
    this.getStusList()
  },
  methods: {
    getStusList (callback) {
      this.$api.post('/api/mention/mentionByCourseLogId', this.ajaxData).then(res => {
        if (res.code === 0) {
          let list = res.data.mdMentionStudentEntityList
          this.stusList = list
          this.mdMentionStudentEntityList = JSON.parse(JSON.stringify(list))
          for (var i = 0; i < this.stusList.length; i++) {
            this.stusList[i].arrive = !!this.stusList[i].arrive
          }
          if (typeof callback === 'function') {
            callback()
          }
        }
      })
    },
    absence (item) {
      this.radioChecked = item.absence
      this.actionSheetShow = true
      this.selectedObj = item
    },
    switchChange (i) {
      if (this.stusList[i].arrive) {
        this.$set(this.stusList, i, {
          absence: 0,
          arrive: true,
          charging: this.stusList[i].charging,
          classId: this.stusList[i].classId,
          courseLogId: this.stusList[i].courseLogId,
          createDate: this.stusList[i].createDate,
          creator: this.stusList[i].creator,
          delFlag: this.stusList[i].delFlag,
          id: this.stusList[i].id,
          remark: this.stusList[i].remark,
          sort: this.stusList[i].sort,
          studentId: this.stusList[i].studentId,
          studentName: this.stusList[i].studentName,
          studentPhone: this.stusList[i].studentPhone,
          updateDate: this.stusList[i].updateDate,
          updater: this.stusList[i].updater
        })
      }
    },
    confirmClick (item) {
      if (this.radioChecked) {
        for (var i = 0; i < this.stusList.length; i++) {
          if (this.stusList[i].id === item.id) {
            this.$set(this.stusList, i, {
              absence: this.radioChecked,
              arrive: false,
              charging: this.stusList[i].charging,
              classId: this.stusList[i].classId,
              courseLogId: this.stusList[i].courseLogId,
              createDate: this.stusList[i].createDate,
              creator: this.stusList[i].creator,
              delFlag: this.stusList[i].delFlag,
              id: this.stusList[i].id,
              remark: this.stusList[i].remark,
              sort: this.stusList[i].sort,
              studentId: this.stusList[i].studentId,
              studentName: this.stusList[i].studentName,
              studentPhone: this.stusList[i].studentPhone,
              updateDate: this.stusList[i].updateDate,
              updater: this.stusList[i].updater
            })
          }
        }
      }
      this.actionSheetShow = false
    },
    noPointName () {
      if (this.isSubmit) {
        this.isLoading = true
        this.$api.post('/api/mention/teacherRemoveMention', this.ajaxData).then(res => {
          this.isLoading = false
          if (res.code === 0) {
            Toast.success('撤销成功！')
          } else {
            Toast.fail('撤销失败！')
          }
        })
      } else {
        this.getStusList(() => {
          Toast.success('撤销成功！')
        })
      }
    },
    pointName () {
      // 组合参数
      let ajaxData = this.ajaxData
      let mdMentionStudentEntityList = JSON.parse(JSON.stringify(this.stusList))
      for (var i = 0; i < mdMentionStudentEntityList.length; i++) {
        if (!mdMentionStudentEntityList[i].arrive && mdMentionStudentEntityList[i].absence === 0) {
          Toast({
            message: '还有同学没有考勤',
            position: 'bottom'
          })
          return
        }
        mdMentionStudentEntityList[i].arrive = mdMentionStudentEntityList[i].arrive ? 1 : 0
      }
      ajaxData.mdMentionStudentEntityList = mdMentionStudentEntityList
      this.isLoading = true
      console.log(1111)
      this.$api.post('/api/mention/addMentionStudent', ajaxData).then(res => {
        this.isLoading = false
        console.log(res)
        if (res.code === 0) {
          this.isSubmit = true
          Toast.success('点名成功')
        } else {
          Toast({
            message: res.msg,
            position: 'bottom'
          })
        }
      })
    }
  },
  components: {
    NavBar,
    Actionsheet
  }
}
</script>

<style lang="scss" scoped>
#lessonDetails {
  height: 100%;
  background: #efefef;
  overflow-y: auto;
  .lesson_detail {
    background: #fff;
    margin-top: .1rem;
    .detail_row {
      margin: 0;
      padding: .14rem .12rem;
      border-bottom: 1px solid #efefef;
      .icon {
        float: right;
      }
    }
  }
  .search_wrapper {
    margin-top: .1rem;
    background: #fff;
    padding: .12rem;
    .input_wrapper {
      display: inline-block;
      width: 2rem;
      height: .3rem;
      position: relative;
      input {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: .15rem;
        border: 1px solid #efefef;
        padding-left: .24rem;
      }
      .icon {
        position: absolute;
        left: .06rem;
        top: 50%;
        transform: translateY(-50%);
      }
      .search_btn {
        display: block;
        width: .5rem;
        font-size: 12px;
        height: .3rem;
        line-height: .3rem;
        border-radius: .15rem;
        background: #efefef;
        color: #888;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
      }
    }
    .sort,.add_stus {
      font-size: 12px;
      display: inline-block;
      height: .3rem;
      line-height: .3rem;
      padding: 0 .1rem;
      margin-left: .12rem;
      border-radius: .15rem;
      background: #efefef;
      color: #888;
      text-align: center;
    }
  }
  .tab_head {
    padding-top: .46rem;
    .tab_line {
      padding: 0 .12rem;
      // padding-left: .42rem;
      height: .4rem;
      line-height: .4rem;
      background: #fff;
      border-bottom: .5px solid #ccc;
      .tab_th{
        color: #000;
        text-align: center;
      }
    }
  }
  .tab_body {
    padding: 0 .12rem;
    background: #fff;
    min-height: 5.12rem;
    // margin-bottom: .52rem;
    position: fixed;
    top: .86rem;
    bottom: .5rem;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .van-checkbox {
      border-bottom: 1px solid #efefef;
    }
    .tab_line{
      height: .44rem;
      line-height: .44rem;
      border-bottom: 1px solid #efefef;
      &:last-child {
        // border: none;
      }
      .tab_tr {
        text-align: center;
        vertical-align: middle;
        height: .44rem;
        vertical-align: middle;
        .icon-dadianhua {
          color: #2196f3;
          font-size: 24px;
        }
      }
      .tab_tr:last-child {
        padding-right: .1rem;
        // text-align: right;
        .icon {
          font-size: 30px;
        }
      }
    }
  }
  .bottom {
    position: fixed;
    z-index: 3;
    bottom: 0;
    background: #fff;
    width: 100%;
    padding: .1rem .12rem;
    height: .48rem;
    .van-checkbox {
      margin-top: .04rem;
    }
    p {
      margin: 0;
      height: .14rem;
      line-height: .14rem;
      span {
        font-size: 12px;
        color: #999;
        display: inline-block;
        width: .4rem;
      }
    }
    .atLesson,.reAtLesson {
      position: absolute;
      right: .15rem;
      top: 50%;
      transform: translateY(-50%);
      background: #2196f3;
      color: #fff;
      display: inline-block;
      padding: 0 .12rem;
      height: .32rem;
      line-height: .32rem;
      border-radius: .16rem;
      &.reAtLesson {
        right: 1rem;
        box-sizing: border-box;
        color: #2196f3;
        background: #fff;
        border: 1px solid #2196f3;
      }
    }
  }
  .mock-loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    // background: #fff;
    .loading_item {
      width: .5rem;
      height: .5rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -.25rem;
      margin-top: -.25rem;
    }
  }
  .confirm_btn {
    width: 100%;
    background: #1989fa;
    border: none;
  }
}
</style>
